<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '40px',
    }"
  >
    <div class="wrap-other-roll">
      <div class="wrap">
        <div class="wrap-num">
          <p>抖音</p>
          <span
            >销量<em>{{ douyin.value }}</em
            >单</span
          >
        </div>
        <div class="wrap-num">
          <p>京东</p>
          <span
            >销量<em>{{ jindong.value }}</em
            >单</span
          >
        </div>
      </div>
      <!-- 访问量统计 -->
      <div class="card">
        <div class="title">访问量统计</div>
        <visit-item />
      </div>
      <!-- 销量统计 -->
      <div class="card">
        <div class="title">销量统计</div>
        <sales-item />
      </div>
      <!-- 商品统计 -->
      <div class="card">
        <div class="title">商品统计</div>
        <goods-item />
      </div>
    </div>
  </div>
</template>

<script>
import visitItem from './components/visit'
import salesItem from './components/sales'
import goodsItem from './components/goods'
export default {
  components: { visitItem, salesItem, goodsItem },
  data() {
    return {
      douyin: {},
      jindong: {},
    }
  },
  created() {
    this.countOrderByShopList()
  },
  methods: {
    countOrderByShopList() {
      this.$axios.get('/count/bigscreent4/countOrderByShop').then((data) => {
        this.count = {}
        this.jindong = {}
        if (data.code == 200) {
          let { douyin, jindong } = data.data
          this.douyin = douyin
          this.jindong = jindong
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.card {
  padding-bottom: 20px;
}
.title {
  color: #45ab49;
  border-bottom: 1px solid #45ab49;
  padding: 10px 0;
  margin-bottom: 15px;
}

.wrap {
  display: flex;
  margin: 20px 0;
  &-num {
    border-radius: 4px;
    border: 1px solid #ebeef5;
    color: #303133;
    padding: 15px 25px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    width: 300px;
    margin-right: 20px;
    p {
      font-size: 16px;
      font-weight: 400;
      color: #b1b1b1;
      margin-bottom: 10px;
    }
    span {
      font-size: 18px;
      color: #b1b1b1;
      em {
        color: #000000;
        font-size: 32px;
        font-weight: 400;
        margin: 0 5px;
      }
    }
  }
}
</style>
